// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import {
  Button,
  Row,
  Col,
  Icon,
  Popup,
  Search,
  Tabbar,
  TabbarItem,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  SwipeCell,
  Card,
  Form,
  Field,
  Divider,
  Dialog,
  Skeleton,
  CellGroup,
  Cell,
  Tab,
  Tabs,
  Image as VanImage,
  NavBar,
  Tag,
  DropdownMenu,
  DropdownItem,
  Uploader,
  List,
  Overlay,
  Lazyload,
  ImagePreview,
  DatetimePicker,
  RadioGroup,
  Radio,
  Switch,
  Loading
} from 'vant'
import './assets/js/flexible'
import store from './store'
// commen存放公共函数的地方
import commen from './commen/commen'
import cookie from './commen/cookie'
import axios from 'axios'
// 富文本编辑器
import VueHtml5Editor from 'vue-html5-editor'
// 图标
import '../node_modules/font-awesome/css/font-awesome.css'

// 全局引入富文本编辑器，并配置
Vue.use(VueHtml5Editor, {
  // 全局组件名称，使用new VueHtml5Editor(options)时该选项无效
  // global component name
  name: 'vue-html5-editor', // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称 // if set true,will append module name to toolbar after icon
  showModuleName: false,

  // 自定义各个图标的class，默认使用的是font-awesome提供的图标 // custom icon class of built-in modules,default using font-awesome
  // icons: {
  //   text: 'fa fa-pencil',
  //   color: 'fa fa-paint-brush',
  //   font: 'fa fa-font',
  //   align: 'fa fa-align-justify',
  //   list: 'fa fa-list',
  //   link: 'fa fa-chain',
  //   unlink: 'fa fa-chain-broken',
  //   tabulation: 'fa fa-table',
  //   image: 'fa fa-file-image-o',
  //   hr: 'fa fa-minus',
  //   eraser: 'fa fa-eraser',
  //   undo: 'fa-undo fa',
  //   'full-screen': 'fa fa-arrows-alt',
  //   info: 'fa fa-info'
  // },
  // 配置图片模块 // config image module
  image: {
    // 文件最大体积，单位字节  max file size
    sizeLimit: 512 * 1024, // 上传参数,默认把图片转为base64而不上传 // upload config,default null and convert image to base64
    upload: {
      url: 'https://mock.yonyoucloud.com/mock/10645/media/upload/image',
      headers: {},
      params: {},
      fieldName: {}
    }, // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩 // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG) // set null to disable compression

    compress: {
      width: 1000,
      height: 1000,
      quality: 80
    }, // 响应数据处理,最终返回图片链接 // handle response data，return image url

    uploadHandler(responseText) {
      //default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
      var json = JSON.parse(responseText)
      if (json.status === 200) {
        return json.image
      } else {
        this.$dialog({ message: json.msg })
      }
    }
  },
  // 语言，内建的有英文（en-us）和中文（zh-cn） //default en-us, en-us and zh-cn are built-in
  language: 'zh-cn', // 自定义语言
  i18n: {
    //specify your language here
    'zh-cn': {
      align: '对齐方式',
      image: '图片',
      list: '列表',
      link: '链接',
      unlink: '去除链接',
      table: '表格',
      font: '文字',
      'full screen': '全屏',
      text: '排版',
      eraser: '格式清除',
      info: '关于',
      color: '颜色',
      'please enter a url': '请输入地址',
      'create link': '创建链接',
      bold: '加粗',
      italic: '倾斜',
      underline: '下划线',
      'strike through': '删除线',
      subscript: '上标',
      superscript: '下标',
      heading: '标题',
      'font name': '字体',
      'font size': '文字大小',
      'left justify': '左对齐',
      'center justify': '居中',
      'right justify': '右对齐',
      'ordered list': '有序列表',
      'unordered list': '无序列表',
      'fore color': '前景色',
      'background color': '背景色',
      'row count': '行数',
      'column count': '列数',
      save: '确定',
      upload: '上传',
      progress: '进度',
      unknown: '未知',
      'please wait': '请稍等',
      error: '错误',
      abort: '中断',
      reset: '重置'
    }
  },
  // 隐藏不想要显示出来的模块 // the modules you don't want
  hiddenModules: [],
  // 自定义要显示的模块，并控制顺序 // keep only the modules you want and customize the order. // can be used with hiddenModules together
  visibleModules: [
    'text',
    'color',
    'font',
    'align',
    'list',
    'link',
    'unlink',
    'image',
    'hr',
    'undo',
    'full-screen'
  ],
  // 扩展模块，具体可以参考examples或查看源码 // extended modules
  modules: {
    //omit,reference to source code of build-in modules
  }
})

Vue.prototype.$cookie = cookie
Vue.prototype.$http = axios
Vue.prototype.commen = commen
Vue.config.productionTip = false
Vue.use(Search)
  .use(Button)
  .use(Row)
  .use(Col)
  .use(Popup)
  .use(Icon)
  .use(Tabbar)
  .use(TabbarItem)
  .use(Swipe)
  .use(SwipeItem)
  .use(Grid)
  .use(GridItem)
  .use(SwipeCell)
  .use(Dialog)
  .use(Card)
  .use(Form)
  .use(Field)
  .use(Divider)
  .use(VanImage)
  .use(Skeleton)
  .use(CellGroup)
  .use(Cell)
  .use(Tab)
  .use(Tabs)
  .use(NavBar)
  .use(Tag)
  .use(DropdownMenu)
  .use(DropdownItem)
  .use(Uploader)
  .use(List)
  .use(Overlay)
  .use(Lazyload)
  .use(ImagePreview)
  .use(DatetimePicker)
  .use(RadioGroup)
  .use(Radio)
  .use(Switch)
  .use(Loading)
/* eslint-disable no-new */

// 路由守卫配置，有些需要登录的页面只有验证登录了才会跳转，否则跳转至登录页面
router.beforeEach((to, from, next) => {
  // 判断to页面是否需要登录认证，并判断用户是否登录
  if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
    // 判断获取用户信息请求是否加载完成，如果加载完成，说明用户的确没有登录，跳转至登录页面
    if (store.getters.loadDone) {
      next({ name: 'login' })
    } else {
      next()
    }
  } else next()
})
// ajax拦截器，添加请求头信息，验证csrftoken
axios.interceptors.request.use(
  config => {
    if (cookie.get('csrftoken')) {
      config.headers['X-CSRFToken'] = cookie.get('csrftoken')
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)
axios.defaults.headers.post['Content-Type'] =
  'application/x-www-form-urlencoded;charset=utf-8'
// 配置项目后端的地址
axios.defaults.baseURL = 'https://mock.yonyoucloud.com/mock/10645' // 默认地址
// axios.defaults.baseURL = 'http://127.0.0.1:8000' // 默认地址

// 创建Vue实例
const vue = new Vue({
  el: '#app',
  router,
  store,
  mounted() {
    // 获取用户登录信息
    this.$http
      .get('/account/getuserinfo')
      .then(res => {
        // 如果获取用户信息成功
        if (res.data.status === 200) {
          // 将用户信息保存至store中
          this.$store.state.userinfo = res.data.userinfo
        }
        // 用户信息加载完成
        this.$store.state.pageControl.UIloadDone = true
      })
      .catch(err => {
        console.log(err)
      })

    // 获取社区的板块信息
    this.$http
      .get('/section/getsections')
      .then(res => {
        if (res.data.status === 200) {
          this.$store.state.pageControl.sectionlist = res.data.section
        }
        this.$store.state.pageControl.sectionLoadDone = true
      })
      .catch(err => {
        console.log(err)
      })
  },
  // 加载APP组件
  components: {
    App
  },
  template: '<App/>'
})

export default vue
